<template>
  <div>
    <el-row :gutter="15">
      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">

        <el-col :span="24" class="top">
          <el-form-item label="标题" prop="title">
            <el-input v-model="title" placeholder="请输入标题" clearable :style="{ width: '100%' }">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24" class="top">
          <el-form-item label="描述" prop="desc">
            <el-input v-model="desc" placeholder="请输入描述" clearable :style="{ width: '100%' }">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="标签" prop="tag">
            <mutiplay ref="muti" :options="options"></mutiplay>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="内容" prop="content">
            <div class="markdown">
              <div class="container">
                <mavon-editor v-model="content" ref="md" :subfield="true" @imgAdd="$imgAdd" @change="change"
                  style="min-height: 600px" />
              </div>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="图片" prop="field104" required>
            <ImageUpload ref="image"></ImageUpload>
          </el-form-item>
        </el-col>
        <el-col :span="2" v-if="!updateFlag">
          <el-form-item label="" prop="save">
            <el-button type="primary" icon="el-icon-search" size="medium" @click="save(false)"> 保存 </el-button>
          </el-form-item>
        </el-col>
        <el-col :span="2" offset="16">
          <el-form-item label="" prop="publish">
            <el-button type="primary" icon="el-icon-search" size="medium" @click="save(true)" v-if="!updateFlag"> 发布
            </el-button>
            <el-button type="primary" icon="el-icon-search" size="medium" @click="update" v-if="updateFlag"> 更新
            </el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>

  </div>
</template>
<script>
// 导入组件 及 组件样式
import { mavonEditor } from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
import { RichText, mutiplay } from "@/components/apeli/richtext";
import ImageUpload from "@/components/ImageUpload"
import { query, addArticle, queryArticleById, updateArticle } from "@/api/article/queryTag";
import { Message } from 'element-ui';
export default {
  components: { RichText, mutiplay, mavonEditor, ImageUpload },
  props: [],
  data() {
    return {
      formData: {


      },
      rules: {
        title: [{
          required: true,
          message: '请输入标题',
          trigger: 'blur'
        }],
        tag: [{
          required: true,
          message: '请选择标签',
          trigger: 'change'
        }],
        content: [{
          required: true,
          message: '请输入内容',
          trigger: 'blur'
        }],
      },
      tags: [],
      imagePath: [],
      content: "",
      desc: "",
      title: "",
      options: [],
      auth: false,
      updateFlag: false,
      id: ""
    }
  },
  computed: {},
  watch: {},
  created() {
    this.show();
    this.queryTags();
  },
  mounted() { },
  methods: {
    save: function (authen) {
      let image = this.$refs['image'];
      let muti = this.$refs['muti'];
      let arr = image.fileList;

      let imageUrlList = [];
      console.log(arr)
      for (let index = 0; index < arr.length; index++) {
        imageUrlList.push(arr[index].path);

      }
      addArticle({ title: this.title, content: this.content, tag: muti.value1, description: this.desc, imageUrlList: imageUrlList, authentic: authen }).then(res => {
        let code = res.code;
        if (code == 200) {
          this.$message.success("保存成功！！！");
           this.$router.push({
              path: 'aticle/person/index'
            })
        } else {
          this.$message.error("未知异常");
        }
      })

    },
    show: function () {
      let ids = this.$route.query.id;
      if (ids != null) {
        queryArticleById(ids).then(res => {
          let code = res.code;
          let data = res.data;
          if (code == 200) {
            this.title = data.title;
            this.content = data.content;
            this.desc = data.description;
            this.auth = data.authentic;
            let image = this.$refs['image'];
            let imageVOList = data.imageVOList;
            for (let item in imageVOList) {
              image.fileList.push({ path: imageVOList[item].imagePath, url: imageVOList[item].imageUrl });
            }
            this.updateFlag = true;
            this.id = ids;
          }
        })
      }
    },
    queryTags: function () {
      query().then(response => {
        this.options = response.data;
      })
    },
    update: function () {
      let image = this.$refs['image'];
      let muti = this.$refs['muti'];
      let arr = image.fileList;

      let imageUrlList = [];
      console.log(arr)
      for (let index = 0; index < arr.length; index++) {
        imageUrlList.push(arr[index].path);
      }
      updateArticle({ id: id, title: this.title, content: this.content, tag: muti.value1, description: this.desc, imageUrlList: imageUrlList, authentic: authen }).then(res => {
        let code = res.code;
        if (code == 200) {
          this.$message.success("更新成功！！！");
          this.$router.push({
            path: 'aticle/person/index'
          })
        } else {
          this.$message.error("未知异常");
        }
      })
    }
    ,
    resetForm() {
      this.$refs['elForm'].resetFields()
    }
  }
}

</script>
<style>
.el-upload__tip {
  line-height: 1.2;
}

.top {
  margin-top: 5px;
}
</style>
